import type { DeckDetail, DeckInfoCardItem } from '/@/api/currentDeck/model/deckModel';
import type { CSSProperties } from 'vue';
import { computed, defineComponent, ref, unref } from 'vue';
import { Icon } from '/@/components/Icon';
import { useCurrentDeckStore } from '/@/store/modules/currentDeck';
import DeckCardDetailPopup from '/@/views/currentDeck/components/DeckCardDetailPopup';

import('./DeckSelectedCardList.less');

export default defineComponent({
  name: 'CurrentDeckSelectedCardList',
  props: {
    deckCardList: {
      type: Object as PropType<DeckDetail['deck_info']>,
      required: true,
    },
    titleColor: {
      type: Boolean as PropType<boolean>,
      default: () => {
        return false;
      },
    },
  },
  setup(props) {
    const currentStore = useCurrentDeckStore();

    const allCards = computed(() => {
      const { deckCardList } = props;
      const allArray: DeckInfoCardItem[] = [];
      for (const item of deckCardList) {
        allArray.push(...item.card_list);
      }
      return allArray;
    });
    const cardSum = computed(() => {
      let num = 0;
      unref(allCards).map((item) => {
        num += item.number!;
      });
      return num;
    });

    const imageShow = ref(true);

    const TitleBox = () => {
      const { titleColor } = props;
      let cssParams: CSSProperties = {
        backgroundColor: '#fff',
        color: '#000',
      };
      if (titleColor) {
        cssParams = {
          backgroundColor: '#5F93C9',
          color: '#fff',
          border: 'none',
        };
      }
      return (
        <div class={'card-nums-box flex items-center justify-between text-sm mb-sm'} style={cssParams}>
          <span class={'font-bold'}>卡牌总数： {unref(cardSum)}</span>
          {!unref(imageShow) ? (
            <div
              class={'show-btn flex items-center text-sm'}
              onClick={() => {
                imageShow.value = true;
              }}
            >
              <Icon icon='mdi:file-image-box' />
              <span>图片展示</span>
            </div>
          ) : (
            <div
              class={'show-btn flex items-center text-sm'}
              onClick={() => {
                imageShow.value = false;
              }}
            >
              <Icon icon='material-symbols:format-list-bulleted-rounded' class={'-mt-2px'} />
              <span>列表展示</span>
            </div>
          )}
        </div>
      );
    };

    const CardItems = ({ cardList }: { cardList: DeckInfoCardItem[] }) => {
      return (
        <ul class={'sel-card-area flex flex-wrap'}>
          {cardList.map((item) => {
            return (
              <li
                class={'sel-card-item'}
                onClick={() => {
                  detailState.value = true;
                  detailCardIdState.value = item.id;
                }}
              >
                <div class={'image'}>
                  <img src={item.img} alt='' />
                </div>
                {item.number! > 1 ? (
                  <div class={'nums right-4px'}>
                    <span>×{item.number}</span>
                  </div>
                ) : null}
                {item.price ? (
                  <div class={'nums left-4px'}>
                    <span>¥{item.price / 100}</span>
                  </div>
                ) : null}
              </li>
            );
          })}
        </ul>
      );
    };

    const CardItemsText = ({ cardList }: { cardList: DeckInfoCardItem[] }) => {
      return (
        <ul class={'sel-card-text-area'}>
          {cardList.map((item) => {
            return (
              <li
                class={'sel-card-item flex items-start justify-between'}
                onClick={() => {
                  detailState.value = true;
                  detailCardIdState.value = item.id;
                }}
              >
                {currentStore.getDeckConfig.has_series ? <div class={'series'}>{item.series_abbr}</div> : null}
                <div class={'name van-ellipsis flex-1 mr-md'}>
                  <div class={'truncate'}>{item.name}</div>
                </div>
                <div class={'nums flex text-right text-[#1380f0] pr-sm'}>
                  {item.price ? <div class={'text-gray-500 mr-lg'}>¥{item.price / 100}</div> : null}
                  <span>×{item.number}</span>
                </div>
              </li>
            );
          })}
        </ul>
      );
    };

    // 浮层
    const detailState = ref(false);
    const detailCardIdState = ref(0);

    return () => (
      <div class='current-deck-select-container'>
        <TitleBox />
        {unref(imageShow) ? (
          props.deckCardList.map((item) => {
            return (
              <div class={`cards-box ${!item.card_number ? 'hidden' : ''}`}>
                <h2 class={'text-sm px-24px py-5px'}>
                  {item.group_name}：<span>{item.card_number}</span>
                </h2>
                <CardItems cardList={item.card_list} />
              </div>
            );
          })
        ) : (
          <div class={'pt-lg'}>
            {props.deckCardList.map((item) => {
              return (
                <div class={`cards-list-box ${!item.card_number ? 'hidden' : ''}`}>
                  <h2 class={'text-sm text-center bg-[#DCEDFF] mb-lg'}>
                    {item.group_name}：<span>{item.card_number}</span>
                  </h2>
                  <CardItemsText cardList={item.card_list} />
                </div>
              );
            })}
          </div>
        )}

        <DeckCardDetailPopup v-model={[detailState.value, 'show']} cardId={detailCardIdState.value} />
      </div>
    );
  },
});
